<template>
	<div class="body1">
		<div
			class="center"
			@click="showNumber"
			ref="el"
			:style="style"
			style="position: fixed"
		>
			菜单
		</div>
		<div v-if="showNumber1" class="round1 round">菜单11</div>
		<div v-if="showNumber2" class="round2 round">菜单22</div>
		<div v-if="showNumber3" class="round3 round">菜单33</div>
		<div v-if="showNumber4" class="round4 round">菜单44</div>
		<div v-if="showNumber5" class="round5 round">菜单55</div>
		<div v-if="showNumber6" class="round6 round">菜单66</div>
		<div v-if="showNumber7" class="round7 round">菜单77</div>
		<div v-if="showNumber8" class="round8 round">菜单88</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDraggable } from "@vueuse/core";
const el = ref<HTMLElement | null>(null);
const { x, y, style } = useDraggable(el, {
	initialValue: { x: window.innerWidth - 200, y: window.innerHeight - 110 },
});
const showNumber1 = ref(false);
const showNumber2 = ref(false);
const showNumber3 = ref(false);
const showNumber4 = ref(false);
const showNumber5 = ref(false);
const showNumber6 = ref(false);
const showNumber7 = ref(false);
const showNumber8 = ref(false);
let type = 1;

const showNumber = () => {
	if (type == 1) {
		setTimeout(() => {
			showNumber1.value = true;
		}, 200);
		setTimeout(() => {
			showNumber5.value = true;
		}, 400);
		setTimeout(() => {
			showNumber2.value = true;
		}, 600);
		setTimeout(() => {
			showNumber7.value = true;
		}, 800);
		setTimeout(() => {
			showNumber3.value = true;
		}, 1000);
		setTimeout(() => {
			showNumber6.value = true;
		}, 1200);
		setTimeout(() => {
			showNumber4.value = true;
		}, 1400);
		setTimeout(() => {
			showNumber8.value = true;
			type = 2;
		}, 1600);
	}
	if (type == 2) {
		setTimeout(() => {
			showNumber1.value = false;
		}, 1600);
		setTimeout(() => {
			showNumber5.value = false;
		}, 1400);
		setTimeout(() => {
			showNumber2.value = false;
		}, 1200);
		setTimeout(() => {
			showNumber7.value = false;
		}, 1000);
		setTimeout(() => {
			showNumber3.value = false;
		}, 800);
		setTimeout(() => {
			showNumber6.value = false;
		}, 600);
		setTimeout(() => {
			showNumber4.value = false;
		}, 400);
		setTimeout(() => {
			showNumber8.value = false;
			type = 1;
		}, 200);
	}
};
</script>

<style scoped lang="scss">
.body1 {
	position: absolute;
	top: 200px;
	left: 500px;
}
.center {
	line-height: 40px;
	text-align: center;
	width: 40px;
	background-color: #000;
	color: #fff;
	border-radius: 40px;
	font-size: 12px;
	position: relative;
	border: 2px solid #1dfefe;
	cursor: pointer;
}
.round {
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	width: 40px;
	background-color: #000;
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
}
.round1 {
	position: absolute;
	top: -70px;
	left: 0;
}
.round2 {
	position: absolute;
	top: 0;
	left: 70px;
}
.round3 {
	position: absolute;
	bottom: -70px;
	left: 0;
}
.round4 {
	position: absolute;
	top: 0;
	left: -70px;
}
.round5 {
	position: absolute;
	top: -50px;
	left: 50px;
}
.round6 {
	position: absolute;
	top: 50px;
	left: -50px;
}
.round7 {
	position: absolute;
	top: 50px;
	left: 50px;
}
.round8 {
	position: absolute;
	top: -50px;
	left: -50px;
}
</style>
